<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import ChatBoxTitle from "@/views/chat/chatBox/ChatBoxTitle.vue";
import ChatBoxContent from "@/views/chat/chatBox/ChatBoxContent.vue";
import ChatBoxActions from "@/views/chat/chatBox/ChatBoxActions.vue";
import ChatBoxAvatar from "@/views/chat/chatBox/ChatBoxAvatar.vue";
import ChatBoxSuggest from "@/views/chat/chatBox/ChatBoxSuggest.vue";
import ChatBoxProcess from "@/views/chat/chatBox/ChatBoxProcess.vue";
import doCopy from '@/utils/copy.js'

const props = defineProps({
    id: String,
    role: {
        type: String,
        required: true,
    },
    content: {
        type: [String, Object],
        required: true,
    },
    contentType: {
        type: String,
        required: false,
        default: 'text'
    },
    parentId: {
        type: String,
        required: false,
        default: '',
    },
    createAt: {
        type: Number,
    },
    status: {
        type: String,
        required: false,
        default: 'complete',
        validator(value, props) {
            // 消息状态，可选值为 	string	complete
            let values = ['loading', 'incomplete', 'complete', 'error']
            return values.indexOf(value) !== -1;
        }
    },
    roleConfig: {
        type: Array,
        required: true,
    },
    process: {
        type: Array
    },
    suggest: {
        type: Array,
    },
    actions: {},
    align: {
        type: String,
    }
})
const emit = defineEmits(["copy", "delete", "good", "bad", "doSuggest"])

let roleObj = props.roleConfig.find(item => item.role === props.role)
if (!roleObj) {
    roleObj = props.roleConfig.find(item => item.role === 'assistant')
}
const name = roleObj?.name
const avatar = roleObj?.avatar

const doSuggestHandler = (suggest) => {
    emit('doSuggest', suggest)
}
const notification = (message) => {
    ElMessage({
        message: message,
        type: 'success',
    })
}
const doAction = (event) => {
    switch (event.action) {
        case 'copy':
            doCopy(props.content);
            notification('已复制到剪切板！')
            break;
        case 'delete':
            emit('delete', props.id);
            break;
        default:
            break;
    }
}
</script>

<template>
    <div class="chat-box" :class="align==='right'?'reverse':(align==='left'?'':(props.role==='user' ?'reverse':''))">
        <div class="chat-box-avatar">
            <chat-box-avatar :avatar="avatar"/>
        </div>
        <div class="chat-box-body">
            <chat-box-title v-if="name" :title="name"></chat-box-title>
            <chat-box-content :content="props.content"
                              :status="status"
                              :role="props.role">
                <template v-slot:loading>
                    <slot name="loading"></slot>
                </template>
            </chat-box-content>

            <div class="chat-box-actions-container">
                <chat-box-actions :actions="props.actions" @action="doAction"></chat-box-actions>
            </div>

            <slot name="chatBoxProcess">
                <chat-box-process v-if="props.process && props.process.length>0"
                                  :process="props.process"></chat-box-process>
            </slot>

            <slot name="chatBoxSuggest">
                <chat-box-suggest v-if="props.suggest" :suggest="props.suggest"
                                  @do-suggest="doSuggestHandler"></chat-box-suggest>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">
$margin: 10px;
$avatarMargin: 6px;
.chat-box {
    position: relative;
    height: fit-content;
    width: calc(100% - 2 * $margin);
    margin: $margin;
    display: flex;
    flex-direction: row;

    &.reverse {
        flex-direction: row-reverse;
        justify-content: flex-end;

        .chat-box-avatar {
            margin-left: $avatarMargin;
        }

        .chat-box-body {
            flex: 1;
            align-items: flex-end;


        }
    }

    &-avatar {
        width: calc(var(--chat-avator-height) + 10px);
        margin-right: $avatarMargin;
    }

    &-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .chat-box-actions-container {
            height: 35px;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.15s;
        }

        &:hover {
            .chat-box-actions-container {
                opacity: 1;
                transform: translateY(0px);
            }
        }
    }

}
</style>